<template>
	<view class="evaluate_details">
		<!-- 商品信息 -->
		<view class="submit_rder_info_goods">
			<view class="submit_rder_info_goods_body">
				<image :src="fromValue?.goodsImages" class="submit_rder_info_goods_body_left"></image>
				<view class="submit_rder_info_goods_body_right">
					<view class="submit_rder_info_goods_body_right_top">
						<view class="submit_rder_info_goods_body_right_top_1">
							{{fromValue?.goodsName}}
						</view>
						<view class="submit_rder_info_goods_body_right_top_2">
							<text class="submit_rder_info_goods_body_right_top_2_left"
								v-if="fromValue?.specifications">{{fromValue?.specifications}}</text>
							<text class="submit_rder_info_goods_body_right_top_2_right">x{{fromValue?.orderNum}}</text>
						</view>
					</view>
					<view class="submit_rder_info_goods_body_right_btm">
						<view class="submit_rder_info_goods_body_right_btm_price goods_price18">
							<text>￥</text>{{fromValue?.unitPrice}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<view class="evaluate_details_form">
			<view class="evaluate_details_form_header">
				<view class="evaluate_details_form_header_left">
					<text>评价</text>
					<u-rate :count="5" v-model="fromValue.evaluateScore" readonly active-color="#FF943C"></u-rate>
				</view>
				<text class="evaluate_details_form_header_right">{{fromValue?.evaluateLevel}}</text>
			</view>
			<view class="evaluate_details_form_content" v-if="fromValue.evaluateContent">
				{{fromValue.evaluateContent}}
			</view>
			<view class="evaluate_details_form_imgs" v-if="fromValue.evaluatePhotos">
				<image :src="item" v-for="(item,index) in fromValue.evaluatePhotos" :key="index"
					@click="handlePreview(index)">
				</image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryByOrderId } from '@/config/goodStuff.api';

	const fromValue = reactive({
		"unitPrice": "unitPrice",
		"orderNum": "",
		"specifications": "",
		"avatar": "",
		"evaluateContent": "",
		"evaluateLevel": "",
		"evaluatePhotos": [],
		"evaluateScore": 0,
		"evaluateUserId": "",
		"evaluateUserNickname": "",
		"fromToday": "",
		"goodsId": "",
		"goodsName": "",
		"goodsImages": "",
		"id": "",
		"isShow": "",
		"orderId": "",
		"telephone": "",
	});

	onLoad(async (options) => {
		const res = await queryByOrderId({ orderId: options?.id })
		console.log(res, 'res');
		fromValue.unitPrice = res?.unitPrice;
		fromValue.goodsName = res?.goodsName;
		fromValue.orderNum = res?.orderNum;
		fromValue.specifications = res?.specifications;
		fromValue.evaluateScore = res?.evaluateScore;
		fromValue.evaluateContent = res?.evaluateContent;
		fromValue.evaluateLevel = res?.evaluateLevel;
		fromValue.goodsImages = res?.goodsImages;
		fromValue.evaluatePhotos = res?.evaluatePhotos?.split(',');
	})
	/**
	 * 图片预览
	 */
	function handlePreview(index) {
		uni.previewImage({
			urls: fromValue.evaluatePhotos,
			count: index
		})
	}
</script>

<style lang="scss" scoped>
	.evaluate_details {
		padding: 24rpx;

		.evaluate_details_form {
			padding: 24rpx;
			background-color: #fff;
			border-radius: 12rpx;

			.evaluate_details_form_header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32rpx;
				font-weight: 500;
				padding-top: 6rpx;

				.evaluate_details_form_header_left {
					display: flex;
					align-items: center;

					text {
						padding-right: 34rpx;
					}
				}

				.evaluate_details_form_header_right {
					color: #FF943C;
				}
			}

			.evaluate_details_form_content {
				padding-top: 30rpx;
				border-top: 1px solid #E6E6E6;
				font-size: 28rpx;
				color: #666666;
				line-height: 44rpx;
				padding: 24rpx;
				border-radius: 20rpx;
				background-color: #F6F6F6;
				min-height: 360rpx;
				margin-top: 30rpx;
			}

			.evaluate_details_form_imgs {
				margin-top: 24rpx;
				margin-right: -24rpx;

				image {
					width: 112rpx;
					height: 112rpx;
					margin-right: 24rpx;
					border-radius: 12rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>